<template>
  <!-- 以下是题目内容 -->
  <div class="questionInfo-container">
    <!-- 题目问题 -->
    <div class="question-title">{{ questionInfo.questionContent }}</div>
    <!-- 题目材料 -->
    <div class="question-materials">
      <span v-for="(item,index) in questionInfo.images"
            :key="index">
        <el-image style="width: 200px;margin-right:5px"
                  :src="item"
                  :preview-src-list="questionInfo.images" />
      </span>
    </div>
    <!-- 题目答案 -->
    <div class="question-answers">
      <!-- 不属于X型题 -->
      <template v-if="questionType!==2">
        <el-radio v-for="item in questionInfo.answer"
                  :key="item.id"
                  v-model="radioAnswer"
                  :label="item"
                  :disabled="resultVisible"
                  class="answer-item"
                  :class="result!==null?result?'isRight':'isWrong':''">
          <div class="answer-content">
            <template v-if="item.images">
              <div class="answer-img">
                <img v-for="(innerItem,innerIndex) in item.images"
                     :key="innerIndex"
                     :src="innerItem"
                     alt="获取图片失败">
              </div>
            </template>
            <div class="answer-text">{{ item.answer }}</div>
          </div>
        </el-radio>
      </template>
      <!-- 属于x型题 -->
      <template v-else>
        <el-checkbox-group v-model="checkboxAnswer">
          <el-checkbox v-for="item in questionInfo.answer"
                       :key="item.id"
                       :label="item"
                       :disabled="resultVisible"
                       class="answer-item"
                       :class="result!==null?result?'isRight':'isWrong':''">
            <div class="answer-content">
              <template v-if="item.images">
                <div class="answer-img">
                  <img v-for="(innerItem,innerIndex) in item.images"
                       :key="innerIndex"
                       :src="innerItem"
                       alt="获取图片失败">
                </div>
              </template>
              <div class="answer-text">{{ item.answer }}</div>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </template>
    </div>
    <!-- 操作按钮 -->
    <div class="btns">
      <div v-show="resultVisible"
           class="result">
        <template v-if="result">
          <span style="color:#67C23A"><i class="el-icon-success" /> 回答正确</span>
        </template>
        <template v-else>
          <span style="color:#F56C6C"><i class="el-icon-error" /> 回答错误</span>
        </template>
        <span class="analysis-btn"
              @click="showAnalysis">{{ analysisVisible?'收起解析':'查看解析' }}</span>
      </div>
      <template v-if="!resultVisible">
        <el-button class="confirm-btn"
                   type="primary"
                   @click="confirmAnswer">确认答案</el-button>
      </template>
      <template v-else>
        <el-button class="confirm-btn"
                   type="info"
                   @click="closeDialog">关闭</el-button>
      </template>
    </div>

    <!-- 显示解析 -->
    <div v-if="analysisVisible"
         class="show-answer">
      <div class="true-answer">
        <span>正确答案: {{ trueAnswer?'':'无' }}</span>
        <div :style="questionType!==2?'display:inline-block':'display:block'"
             v-html="trueAnswer" />
      </div>
      <div class="analysis">解析: {{ questionInfo.analysis||'这道题还没有解析喔~' }}</div>
    </div>
  </div>
</template>
<script>
import { insertQuestionRecord } from '@/api/train'
export default {
  name: 'Question',
  props: {
    questionInfo: {
      type: Object,
      default() {
        return {}
      },
      required: true
    }
  },
  data() {
    return {
      question: this.questionInfo, // 题目信息
      questionType: this.questionInfo.questionType, // 题目类型
      questionStatus: this.questionInfo.status, // 题目是否做过的状态
      radioAnswer: null, // 单选题的答案
      checkboxAnswer: [], // 多选题的答案

      result: null, // 结果
      resultVisible: false, // 显示结果
      trueAnswer: '', // 正确答案
      analysisVisible: false // 显示解析
    }
  },
  created() {
    // 判断这道题是否已经做过
    if (this.questionStatus !== null) this.answered()
  },
  methods: {
    // 判断这道题是否已经做过
    answered() {
      this.result = this.questionStatus !== 2 // 显示结果为正确/错误
      this.resultVisible = true // 显示结果
      if (this.questionType === 2) {
        const answerIdList = this.question.answerId.split(',')
        this.checkboxAnswer = this.question.answer
        this.checkboxAnswer = this.checkboxAnswer.filter((item) =>
          answerIdList.includes(item.id + '')
        )
        this.question.answer.forEach((item) => {
          if (item.isTrue) {
            this.trueAnswer += item.answer + '<br>'
          }
        })
      } else {
        this.radioAnswer = this.question.answer
        this.radioAnswer = this.radioAnswer.find(
          (item) => item.id + '' === this.question.answerId
        )
        this.trueAnswer = this.question.answer.find(
          (item) => item.isTrue
        ).answer
      }
    },
    // 确认结果
    confirmAnswer() {
      // A1/A2/A3_4
      // 这条判断语句是为B型题准备的
      // if (this.questionType !== 2 && this.questionType !== 2) {
      if (this.questionType !== 2) {
        if (!this.radioAnswer) return false
        this.result = this.radioAnswer.isTrue || false
        this.trueAnswer = this.question.answer.find(
          (item) => item.isTrue
        ).answer
      } else if (this.questionType === 2) {
        let trueAnswer_temp = ''
        if (!this.checkboxAnswer.length) return false
        const trueNum = this.question.answer.reduce((temp, newVal, index) => {
          let num = temp
          if (newVal.isTrue) {
            ++num
            trueAnswer_temp += `${newVal.answer}<br>`
          }
          return num
        }, 0)
        this.trueAnswer = trueAnswer_temp
        if (this.checkboxAnswer.length < trueNum) {
          this.result = false
        } else {
          this.result = this.checkboxAnswer.every((item) => item.isTrue)
        }
      }
      // else {
      //   console.log('B型题')
      // }
      this.addQuestionRecord()
      this.resultVisible = true
      this.$emit('answered', this.recordData())
    },
    recordData() {
      let answerId = null
      if (this.questionType === 2) {
        answerId = this.checkboxAnswer.map((item) => item.id).join(',')
      } else {
        answerId = this.radioAnswer.id + ''
      }
      return {
        questionId: this.question.questionId,
        answerId,
        status: this.result ? 1 : 2
      }
    },
    // 调用新增用户做题记录api
    addQuestionRecord() {
      insertQuestionRecord(this.recordData()).then((res) => {
        console.log(res)
      })
    },
    // 关闭对话框
    closeDialog() {
      this.$emit('doClose')
    },
    // 显示解析
    showAnalysis() {
      this.analysisVisible = !this.analysisVisible
    }
  }
}
</script>
<style lang="scss" scoped>
// 题目容器
.questionInfo-container {
  padding: 0px 10px;
  // 题目问题
  .question-title {
    font-size: 16px;
    color: #333333;
    margin-bottom: 5px;
  }
  // 题目材料
  .question-materials {
    .materials-images {
      max-width: 200px;
      margin: 5px 0px 0px 20px;
      cursor: pointer;
    }
  }
  // 题目答案
  .question-answers {
    .answer-item {
      display: flex;
      width: 100%;
      padding: 10px 0px 0px;
      .answer-content {
        display: inline-block;
        .answer-img {
          font-size: 12px;
          color: #c0c4cc;
          vertical-align: bottom;
          margin-bottom: 5px;
        }
      }
    }
    // 覆盖el单选多选文字换行方式
    ::v-deep .el-radio,
    ::v-deep .el-checkbox {
      white-space: normal !important;
    }
    // 覆盖el单选多选禁用时字体颜色
    ::v-deep .is-disabled[class~='answer-item'] {
      .answer-text {
        color: #606266;
      }
    }
    // 高亮正确/错误的答案
    .isRight[class~='is-checked'] {
      .answer-text {
        color: #67c23a;
      }
    }
    .isWrong[class~='is-checked'] {
      .answer-text {
        color: #f56c6c;
      }
    }
  }
  // 查看解析 & 确认答案按钮
  .btns {
    height: 40px;
    line-height: 40px;
    padding-top: 10px;
    .result {
      display: inline-block;
      font-size: 15px;
      .analysis-btn {
        margin-left: 15px;
        cursor: pointer;
      }
      .analysis-btn:hover {
        text-decoration: underline;
      }
    }
    .confirm-btn {
      float: right;
    }
  }
  // 显示答案 & 解析
  .show-answer {
    // min-height: 30px;
    border-top: 1px dashed #c0c4cc;
    margin-top: 15px;
    padding-top: 10px;
    .true-answer {
      padding-bottom: 10px;
      margin-bottom: 10px;
      line-height: 18px;
      border-bottom: 1px dashed #c0c4cc;
    }
  }
}
</style>
